<template>
	<view>
		<u-skeleton :loading="isLoading" rows="10">
			<!--pages/exam/exam.wxml-->
			<view class="box">


				<view class="" style="width: 97.5vw;margin-left: 1.25vw;">
					<view class="head" style="padding:0px 20rpx 0px 20rpx;">
						<view class="y_cell" style="border-top:none;">

							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">累计考试</text>

									<view class="y_tag floatright mlw y_tag_bgPrimary">
										{{examInfo.examCount}}次
									</view>

								</view>
							</view>

							<view class="y_cell_right">
								<view style="float: left;">
									<text class="u-cell-text " style="color: rgb(150, 151, 123);">使用试卷</text>

									<view class="y_tag floatright mlw y_tag_bgPrimary">
										{{examInfo.testPaperCount}}张
									</view>

								</view>

							</view>
						</view>

						<view class="y_cell">

							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">模拟考试</text>

									<view class="y_tag floatright mlw y_tag_bgPrimary">
										{{examInfo.mockCount}}次
									</view>

								</view>
							</view>

							<view class="y_cell_right">
								<view style="float: left;">
									<text class="u-cell-text" style="color: rgb(150, 151, 123);">正确率</text>

									<view class="y_tag floatright mlw y_tag_bgPrimary">
										{{examInfo.mockRightPercent}}%
									</view>

								</view>

							</view>
						</view>

						<view class="y_cell" style="border-bottom: none;">

							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">最高得分</text>

									<view class="y_tag floatright mlw y_tag_bgPrimary">
										{{examInfo.mockMaxScore}}分
									</view>

								</view>
							</view>

							<view class="y_cell_right">
								<view style="float: left;">
									<text class="u-cell-text" style="color: rgb(150, 151, 123);">平均分</text>

									<view class="y_tag floatright mlw y_tag_bgPrimary">
										{{examInfo.mockAvgScore}}分
									</view>

								</view>

							</view>

						</view>

					</view>
				</view>



				<view class="content" style="margin-top: 10px;">

					<u-tabs :list="list" :itemStyle="{ width: '42%',marginBottom:'20rpx'}" :current="current"
						active-color="#30B1B7" lineWidth="40" @change="tagChange"></u-tabs>

					<view v-if="current == 0">
						<view class="" v-if="notBrushQuestions.length!=0">


							<!-- <u-skeleton :loading="isLoading" rows="10"> -->
							<view class="options" v-for="(item,index) in notBrushQuestions.data" :key="index"
								@click.stop="go_Mock(item)">
								<view class="o_top option">
									<view class="floatleft mlw"
										style="font-size: 30rpx;font-weight: bold;color: rgb(255, 105, 180);">
										{{item.name}}

									</view>

									<view class="floatright y_tag mrw y_tag_bgSuccess" v-if="item.isFinish==1">
										{{item.score}}分
									</view>
									<view class="floatright y_tag  y_tag_bgPrimary mrw">{{item.labels}}</view>



								</view>

								<view class="o_top option">
									<view class="floatleft  mlw">
										<view class="y_tag floatleft y_tag_Warning">
											题目{{item.questionCount}}道
										</view>

										<view class="y_tag floatleft mlw y_tag_Warning">
											难度:{{item.lv}}
											<view class="iconfont icon-xingxing floatright" style="font-size: 20rpx;">

											</view>
										</view>

										<view class="y_tag floatleft mlw y_tag_Warning">
											总分:{{item.sumScore}}分
										</view>

										<view class="y_tag floatleft mlw y_tag_Warning">
											及格分:{{item.passScore}}分
										</view>
									</view>

								</view>




								<view class="o_top option examtime" style="margin-bottom: 16rpx;">
									考试时间：{{item.lastTime}}
								</view>


							</view>

						</view>

						<view class="" v-else>
							<u-empty style="height: 150px;" text="暂无考试" icon="../../static/imgs/data.png">
							</u-empty>
						</view>






						<!-- </u-skeleton> -->


					</view>



					<view v-if="current == 1">
						<u-skeleton :loading="isLoading" rows="10">
							<!-- 							<view class="options" v-for="(item,index) in isBrushQuestions" :key="index"
								@click="selectResult(item.id)">
								<view class="o_top option">
									<view class="floatleft mlw" style="font-size: 36rpx;font-weight: bold;">
										{{item.name}}
									</view>

									<view class="floatright y_tag mrw y_tag_bgWarning"
										v-if="item.isFinish==1  && item.score<item.passScore">
										{{item.score}}分
									</view>
									<view class="floatright y_tag mrw y_tag_bgSuccess"
										v-if="item.isFinish==1  && item.score>=item.passScore">
										{{item.score}}分
									</view>

									<view class="floatright y_tag mrw y_tag_bgDanger" v-if="item.isFinish==0">
										缺考
									</view>


								</view>

								<view class="o_top option">
									<view class="floatleft  mlw">
										<view class="y_tag floatleft ">
											{{item.totalTime}}分钟
										</view>

										<view class="y_tag floatleft mlw">
											总分:{{item.totalScore}}
										</view>

										<view class="y_tag floatleft mlw">
											及格分:{{item.passScore}}
										</view>

										<view class="y_tag floatleft mlw">
											交卷:{{item.completeCount}} / {{item.allCount}}
										</view>
									</view>

								</view>




								<view class="o_top option examtime">
									时间：{{item.beginTime}} 至 {{item.endTime}}
									<view class="y_tag floatleft y_tag_bgPrimary"
										style="margin-right: 20rpx; margin: 10px;">
										查看详情
									</view>
								</view>


							</view> -->
							<view class="" v-if="notBrushQuestions.length!=0">


								<!-- <u-skeleton :loading="isLoading" rows="10"> -->
								<view class="options" v-for="(item,index) in isBrushQuestions.data" :key="index"
									@click.stop="go_Mock(item)">
									<view class="o_top option">
										<view class="floatleft mlw"
											style="font-size: 30rpx;font-weight: bold;color: rgb(147, 112, 224);">
											{{item.name}}
											<view class="y_tag floatright y_tag_success" style="margin-left: 10rpx;">
												平均分:{{item.examCount}}
											</view>
											<view class="y_tag floatright" style="margin-left: 10rpx;">
												次数:{{item.examCount}}
											</view>


										</view>

										<view class="floatright y_tag mrw y_tag_bgSuccess" v-if="item.isFinish==1">
											{{item.score}}分
										</view>
										<view class="floatright y_tag  y_tag_bgPrimary mrw">{{item.labels}}</view>



									</view>

									<view class="o_top option">
										<view class="floatleft  mlw">
											<view class="y_tag floatleft y_tag_Warning">
												题目{{item.questionCount}}道
											</view>

											<view class="y_tag floatleft mlw y_tag_Warning">
												难度:{{item.lv}}
												<view class="iconfont icon-xingxing floatright"
													style="font-size: 20rpx;">

												</view>
											</view>

											<view class="y_tag floatleft mlw y_tag_Warning">
												最高:{{item.maxScore}}分
											</view>

											<view class="y_tag floatleft mlw y_tag_Warning">
												最低:{{item.minScore}}分
											</view>
										</view>

									</view>




									<view class="o_top option examtime" style="margin-bottom: 16rpx;">
										考试时间：{{item.lastTime}}
									</view>


								</view>

							</view>

							<view class="" v-else>
								<u-empty style="height: 150px;" text="暂无考试" icon="../../static/imgs/data.png">
								</u-empty>
							</view>

						</u-skeleton>

					</view>

				</view>



			</view>
		</u-skeleton>
	</view>
</template>

<script>
	// import {
	// 	getMyExam
	// } from '../../../api/index';

	// import {
	// 	getUserStatistics
	// } from '../../../api/exam';
	import {
		GetMockStatistics,
		GetMockTestpapers
	} from '../../../api/brush_questions.js';
	export default {
		data() {
			return {
				//未结束的考试
				notBrushQuestions: [],
				// 已结束的考试数据
				isBrushQuestions: [],
				examInfo: [],
				mydata: {},
				isLoading: true,
				pages: {
					page: 1,
					limit: 10,
				},
				pages_isEnd: {
					page: 1,
					limit: 10,
				},
				pages_notEnd: {
					page: 1,
					limit: 10
				},
				test: "测试11",


				list: [{
						name: "未刷试卷",
					},
					{
						name: "已刷试卷",
					}
				],
				current: 0,
			}
		},
		async onShow() {

		},
		onLoad() {
			this.bindData();
		},
		onReachBottom() {
			uni.showLoading({
				title: "加载中",
			})
			if (this.current == 0) {
				if (this.pages_notEnd.limit >= this.notBrushQuestions.total) {
					uni.showToast({
						icon: "none",
						title: "已经到底啦"
					})
				}
				this.pages_notEnd.limit += 10;
				this.getMyNotEndExam();
			} else if (this.current == 1) {
				if (this.pages_isEnd.limit >= this.isBrushQuestions.total) {
					uni.showToast({
						icon: "none",
						title: "已经到底啦"
					})
				};
				this.pages_isEnd.limit += 10;
				this.getMyisEndExam();
			}
		},
		methods: {
			go_Mock(item) {
				uni.navigateTo({
					url: "/pages/brush_questions/mock_questions/start_Mock/start_Mock?id=" + item.id
				})
			},
			/**进入页面获取数据
			 * @param {Object} item
			 */
			async bindData() {
				const res = await GetMockStatistics();
				console.log(res);
				if (res.result === 0) {
					this.examInfo = res.data;
				}
				const res2 = await GetMockTestpapers({
					isMock: 0
				});
				const res3 = await GetMockTestpapers({
					isMock: 1
				});
				const result = [res.result, res2.result, res3.result].every(d => d == 0);
				if (!res) {
					uni.showToast({
						title: "数据异常"
					})
				}
				this.examInfo = res.data;
				this.notBrushQuestions = res2.data;
				console.log("notOver", this.notBrushQuestions);
				this.isBrushQuestions = res3.data;
				console.log("isOver", this.isBrushQuestions);
				this.isLoading = false;


			},
			//开始考试
			startExam(item) {
				if (item.isFinish === 1 && item.score != null) {
					uni.navigateTo({
						url: `/pages/exam/result/result?id=${item.id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/exam/examing/examing?id=${item.id}`
					})
				}
				// uni.navigateTo({
				// 	url: `/pages/exam/examing/examing?id=${item.id}`
				// })
			},
			/**
			 * 点击查看已结束的考试的点击事件
			 */
			selectResult(id) {
				uni.navigateTo({
					url: '/pages/exam/result/result?id=' + id
				})
			},
			//tabs标签改变事件
			tagChange(index) {
				this.current = index.index;
				//如报错则用this.current = index代替上行
			},
			/**
			 * 获取未结束的考试
			 */
			getMyNotEndExam() {
				getMyExam({
					page: this.pages_notEnd.page,
					limit: this.pages_notEnd.limit,
					isEnd: 0
				}).then(res => {
					if (res.result === 0) {
						this.notBrushQuestions = res.data.data;
						console.log("触发了获取未结束考试题目事件", res);
						uni.hideLoading();
					}
				})
			},
			//获取考试数据统计
			getExamInfo() {
				getUserStatistics({}).then(res => {
					this.examInfo = res.data;

				})
			},

			/**
			 * 获取已经结束的考试
			 */
			getMyisEndExam() {
				getMyExam({
					page: this.pages_isEnd.page,
					limit: this.pages_isEnd.limit,
					isEnd: 1
				}).then(res => {
					if (res.result === 0) {
						this.isBrushQuestions = res.data.data;
						console.log("触发了获取已结束考试题目事件", res);
						uni.hideLoading();

					}
				})
			},

		}
	}
</script>

<style>
	@import url("/static/main.css");
	@import url("/static/iconfont/icons.css");

	/* .y_cell {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 65rpx;
	} */

	.y_cell_left {
		margin-left: 10rpx;
	}

	.y_cell_right {
		margin-right: 10rpx;
	}


	.examtime {
		font-size: 12px;
		color: rgb(128, 128, 128);
		margin-left: 10rpx;
	}

	.option {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.options {
		margin-left: 1.2%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 10rpx;
		// display: flex;
		// justify-content: space-between;
		width: 97%;
		border-radius: 10rpx;
		border: 1px solid rgba(25, 137, 250, 0.2);
	}

	.options:last-child {
		margin-bottom: 10rpx;
	}


	.y_tag {
		margin-top: 6rpx;
		padding: 4rpx;
		height: 24rpx;
		text-align: center;
		line-height: 24rpx;
		border: 1px solid rgb(25, 137, 250);
		color: rgb(25, 137, 250);
		border-radius: 6rpx;
		font-size: 10px;
	}

	.o_top {
		width: 100%;
	}







	.u-tag {
		margin-left: 8rpx;
	}

	.head {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.cell-left {
		float: left;
	}

	.cell-right {
		float: right;
	}

	.contont {
		margin-top: 10px;
	}

	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>